<template>
	<view class="bigbox">
		<!-- 控制高度 -->
		<view bar>

		</view>
		<view class="title">
			<!-- 版本 -->
			<!-- title -->
			<view class="name" f12 w800>
				智能Ai工具
			</view>
		</view>
		<view class="swiper-image">
          <view class="" >
			<image src="@/static/hb1.png" alt="" />
		  </view>
		</view>
		<view class="ListOfFeatures">
			<view class="ListOfFeaturesTitle" f12 w800>
				快捷应用
			</view>
			<view class="ListOfFeaturesInfo">
				<view class="" v-for="item, index in state.Features" f12 :style="{ background: item.color }">
					<view class="">
						<view class="">
							{{ item.name }}
						</view>
						<view class="" f16>
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<LoginToast v-if="!state.islogin"></LoginToast>
	</view>
</template>

<script setup>
import { reactive, ref } from "vue"
import { onShow } from "@dcloudio/uni-app"
import LoginToast from "@/components/login/Toast.vue"
const state = reactive({
	Features: [
		{
			name: "短视频脚本",
			text: "帮你高效创作爆款短视频脚本",
			icon: "video1",
			color: "#0142FC"
		}
		,
		{
			name: "高端助理",
			text: "提供给你各类高端辅助服务",
			icon: "text",
			color: "#A687FC"
		},
		{
			name: "直播脚本",
			text: "帮你高效创作完整直播脚本",
			icon: "video2",
			color: "#1BBDFE"
		},
		{
			name: "文案",
			text: "帮你创作吸引眼球的文案",
			icon: "text",
			color: "#1CD793"
		},
		{
			name: "视频创作",
			text: "通过分镜脚本有效生成视频",
			icon: "text",
			color: "#0142FC"
		}
	],
	islogin: true
})
onShow(() => {
	let token = uni.getStorageSync("token")
	if (token) {
		state.islogin = true
	} else {
		state.islogin = false
	}
})
</script>


<style lang="scss" scoped>
.bigbox {
	height: 100%;
	width: 100%;
	position: relative;
}

.title {
	background: #CDDFE3;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 35px;
}

.swiper-image {
	margin: 10px 15px 0;
	height: 20%;
	min-height: 185px;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
	>view{
		width: 100%;
		height: 100%;
	}
	>view>image{
		width: 100%;
		height: 100%;
	}
}

.ListOfFeatures {
	margin: 0 15px;
}

.ListOfFeaturesTitle {
	height: 45px;
	display: flex;
	align-items: center;
}

.ListOfFeaturesInfo {
	display: flex;
	flex-flow: column wrap;
	height: 210px;
	box-sizing: border-box;

	>view {
		width: 48%;
		border-radius: 10px;
		padding-top: 15px;
		padding-left: 10px;
		box-sizing: border-box;
		color: #fff;
	}

	>view:nth-child(1) {
		height: 140px !important;
		margin-bottom: 5px;
	}

	>view:not(:first-child) {
		height: 65px;
		margin-bottom: 7.5px;
	}

	>view:last-child {
		margin-bottom: 0px;
	}

	>view:nth-child(2) {
		margin-bottom: 0 !important;
	}
}</style>
